<template>
  <s-page custom-class="NavBar-Page">
    <s-nav-bar
      title="朋友圈"
      immersive
      background="#171918"
      :background-style="{ opacity }"
      :title-style="{ opacity }"
      color="white"
      back
      transparent="fade-in"
      :start-top="100"
      :scroll-top="scrollTop"
      @opacity="onOpacity"
    />

    <view class="container">
      <s-image src="/static/imgs/weixin-banner.jpg" width="100%" height="771" />
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    scrollTop: 0,
    opacity: 0,
  }),
  onPageScroll({ scrollTop }) {
    this.scrollTop = scrollTop;
  },
  methods: {
    onOpacity(opacity) {
      this.opacity = opacity;
    },
  },
};
</script>

<style lang="scss">
.NavBar-Page {
  .container {
    height: 125vh;
    background-color: #171918;
  }
}
</style>
